// 页面加载完不会触发 hashchange，这里主动触发一次 hashchange 事件
window.addEventListener('DOMContentLoaded', onLoad)
// 监听路由变化
window.addEventListener('popstate', onPopState)

// 路由视图
let routerView = null

function onLoad() {
  routerView = document.querySelector('#routeView')
  onPopState()

  // 🌟🌟🌟🌟🌟拦截 <a> 标签点击事件默认行为， 点击时使用 pushState 修改 URL并更新手动 UI，从而实现点击链接更新 URL 和 UI 的效果。
  let linkList = document.querySelectorAll('a[href]')

  linkList.forEach(el => el.addEventListener('click', (e) => {
    //阻止默认事件
    e.preventDefault()
    console.log('%c%s %s', 'color: #00e600', history,el.getAttribute('href'));
    // eslint-disable-next-line no-restricted-globals
    history.pushState("这里是否可以添加state状态", '', el.getAttribute('href'))
   
    onPopState()
  }))


}

// 路由变化时，根据路由渲染对应 UI
function onPopState () {
  console.log('%c⧭', 'color: #f2ceb6', location.pathname);
  switch (location.pathname) {

    case '/home':
      routerView.innerHTML = 'Home'
      return
    case '/about':
      routerView.innerHTML = 'About'
      return
    default:
      return
  }
}